<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>黑马旅游网-登录</title>  
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="app">

	<!--引入头部-->
	<div id="header">
	</div>
	<!-- 头部 end -->
	<section id="login_wrap">
		<div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">

		</div>
		<div class="login-box">
			<div class="title">
				<img src="images/login_logo.png" alt="">
				<span>欢迎登录黑马旅游账户</span>
			</div>
			<div class="login_inner">

				<!--登录错误提示消息-->
				<div id="errorMsg" class="alert alert-danger" v-html="errorMsg"  ></div>
				<!--登录表单-->
				<form id="loginForm">
					<input type="hidden" name="action" value="login"/>
					<input name="username" type="text" placeholder="请输入账号" v-model="user.username"  autocomplete="off"/>
					<input name="password" type="text" placeholder="请输入密码"  v-model="user.password" autocomplete="off"/>
					<div class="verify">
						<input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
						<span><img src="" alt="" onclick="changeCheckCode(this)"></span>
					</div>
					<div class="submit_btn">
						<button type="button" @click="login()" >登录</button>
						<div class="auto_login">
							<input type="checkbox" name="" class="checkbox">
							<span>自动登录</span>
						</div>
					</div>
				</form>
				<div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
			</div>

		</div>
	</section>
	<!--导入底部-->
	<div id="footer">
	</div>

</div>
</body>

</html>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{},
            errorMsg:""
        },
        methods:{
             login(){
                 axios.post("/user?action=login" , this.user).then(resp=>{
                     console.log(resp.data);
                     if(resp.data=="ok"){
                         alert('登录成功');
                         location.href="/index.html"
                     }else{
                         this.errorMsg= "用户名或密码错误";
                     }
                 })
             }
        },
        created(){
            //alert(1)
        }
    })
</script>